<template>
  <div class="toolsContainer">
    <Button @click="warterMarkVisible = true">图片水印功能</Button>
    <Button @click="routePush">routePush</Button>
    <Button @click="pushNum">添加一个数</Button>
    <Button @click="popNum">删除一个数</Button>
    <Button @click="modalVisible = true"> 显示模态框 </Button>
    <transition-group name="list_Animate">
      <div class="listItem" v-for="(item, index) in list" :key="index">
        {{ item }}
      </div>
    </transition-group>
    <Modal
      title="模态框title"
      :visible="modalVisible"
      @modal-on-cancel="modalVisible = false"
      @modal-on-confirm="submitForm('ruleForm')"
    >
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="name">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="上传图片" prop="content">
          <Cropper />
        </el-form-item>
      </el-form>
    </Modal>

    <Modal
      title="模态框title"
      :visible="warterMarkVisible"
      @modal-on-cancel="warterMarkVisible = false"
    >
      <Watermark />
    </Modal>
  </div>
</template>

<script>
import Modal from "@/components/Modal.vue";
import Cropper from "@/components/Cropper/index.vue";
import Watermark from "@/components/Watermark/index.vue";
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
} from "vue";
import router from "@/router";
export default defineComponent({
  components: {
    Modal,
    Cropper,
    Watermark,
  },
  name: "tools",
  setup() {
    const { proxy } = getCurrentInstance(); // 获取当前实例
    let list = ref([4]);
    const pushNum = () => {
      list.value.push(Math.floor(Math.random() * 1000)),
        console.log("list", list);
    };
    const popNum = () => {
      list.value.pop();
    };

    /* 以下为内容表单区域 */
    const modalVisible = ref(false);
    let form = reactive({
      title: "",
      content: "",
    });
    const rules = reactive({
      name: [
        {
          required: true,
          message: "Please input name",
          trigger: "blur",
        },
      ],
      content: [
        {
          required: true,
          message: "Please input content",
          trigger: "blur",
        },
      ],
    });
    const submitForm = (ref) => {
      proxy.$refs[ref].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };

    // 水印功能
    const warterMarkVisible = ref(false);

    let obj = {
      a: 1,
      b: 2,
      age: 23,
      _coreNum: 23,
    };
    const invariant = function (key, action) {
      if (key[0] === "_") {
        console.log(`不能${action}私有属性"${key}"`);
      }
    };

    const proxy1 = new Proxy(obj, {
      get: (target, propKey) => {
        if (Reflect.has(target, propKey)) {
          return target[propKey];
        } else {
          return `没有${propKey}这个属性啦，是不是打错了？`;
        }
      },
      set: (target, propKey, propVal) => {
        if (propKey == "age") {
          if (propVal > 140) {
            console.log(
              `${propVal}岁？你这个年龄怕是要成仙吧，不准设置140岁以上`
            );
          } else {
            target[propKey] = propVal;
          }
        } else {
          target[propKey] = "55";
          console.log(
            `不给你设置，你要设置的${propKey}的值为：${propVal}，我偏不给，我设置成55`
          );
        }
        return true;
      },
      deleteProperty: (target, key) => {
        invariant(key, "删除");
        delete target[key];
        return true;
      },
    });

    const obj2 = {
      c: 2,
      d: 5,
    };

    Reflect.defineProperty(obj2, "name", {
      value: "bolbo",
      writable: true,
    });

    let testArr = [
      {
        id: 6,
        data: [
          {
            dataId: 9,
          },
          {
            dataId: 6,
          },
        ],
      },
      {
        id: 9,
        data: [
          {
            dataId: 4,
          },
          {
            dataId: 3,
          },
        ],
      },
    ];

    const testArrFun = () => {
      let ele1 = testArr.find((item) => {
        return item.id == 6;
      });
      let ele2 = ele1.data.find((item) => {
        return item.dataId == 4;
      });

      console.log("testArr", ele1, ele2);
    };

    let testMap = new Map();
    let heloow = "hello";
    testMap.set(1, 1);
    testMap.set(2, 3);
    testMap.set(3, 3);
    testMap.set(heloow, "sdfsdfsdfd");

    // let mapArr = Array.from(testMap)

    let mapArr = [...testMap];

    mapArr.flat(Infinity);
    const routePush = () => {
      router.push({ path: "/routerMoni" });
    };
    // 上传完成方法
    const handleUploadSuccess = (res) => {
      console.log("res", res);
    };

    onMounted(() => {
      console.log(proxy1.nnnn);
      proxy1.a = 8;
      proxy1.age = 139;
      delete proxy1._coreNum;
      console.log(proxy1, "object");
      obj2.name = "edit name";
      console.log("Reflect.has", Reflect.has(obj2, "c"));
      console.log(
        "Reflect.getOwnPropertiyname",
        Object.getOwnPropertyNames(obj2)
      );
      console.log("obj2", obj2);
      console.log("mapArr", mapArr);
      console.log("testMap", testMap, testMap.get(heloow), testMap.has(heloow));
      console.log("mapArr=>map", new Map(mapArr).get(heloow));
      testArrFun();
    });
    return {
      list,
      pushNum,
      popNum,
      form,
      modalVisible,
      rules,
      submitForm,
      handleUploadSuccess,
      routePush,
      warterMarkVisible,
    };
  },
});
</script>

<style lang='scss'>
.toolsContainer {
  padding: 20px;
  min-width: 800px;
  .btn + .btn {
    margin-right: 20px;
  }
  .listItem {
    background-color: white;
    width: 200px;
    margin-bottom: 20px;
    padding: 20px;
    box-shadow: 0 0 4px 4px rgba($color: #000000, $alpha: 0.1);
  }
  .list_Animate-enter-active {
    animation: fadeInUp 0.5s;
  }
  .list_Animate-leave-active {
    animation: fadeOutDown 0.5s;
  }
}
</style>